<template>
<div class="container overview" :class="theme">
  <div class="ov-l">
    <div class="introduction mb20">
      <dv-box title="项目简介">
        <div class="introduction-con">
          <div class="item">
            <div class="label"><i></i>项目名称</div>
            <div class="value">{{project.projName}}</div>
          </div>
          <div class="item">
            <div class="label"><i></i>建设单位</div>
            <div class="value">{{project.buildUnitName || '未知'}}</div>
          </div>
          <div class="item">
            <div class="label"><i></i>设计单位</div>
            <div class="value">{{project.designUnitName || '未知'}}</div>
          </div>
          <div class="item">
            <div class="label"><i></i>施工单位</div>
            <div class="value">{{project.mainContractorName || '未知'}}</div>
          </div>
          <div class="item">
            <div class="label"><i></i>监理单位</div>
            <div class="value">{{project.supervisorUnitName || '未知'}}</div>
          </div>
          <div class="item">
            <div class="label"><i></i>项目介绍</div>
            <div class="value info"><div class="line2">{{project.xmgk}}</div></div>
          </div>
        </div>
      </dv-box>
    </div>
    <div class="energy" ref="energyChart">
      <dv-box title="环境监测">
        <div class="environment-c-con">
          <div class="item" v-for="(item,index) in environment" :key="index">
            <img :src="theme == 'light' ? item.light : item.icon" />
            <div class="v">
              <span>{{item.label}}</span>
              <p>{{item.value}}</p>
            </div>
          </div>
        </div>

        
      </dv-box>
    </div>
  </div>
  <div class="ov-c">
    <div class="ov-c-con">
      <el-carousel trigger="click" style="flex:1">
        <el-carousel-item v-for="item in imgList" :key="item">
          <el-image :src="item" style="width: 100%;height: 100%;" fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
      <div class="progress">
        <h4>工程进度（总工期{{allDays}}天）</h4>
        <div class="progress-c">
          <div class="progress-c-chart">
            <Echart :options="progressData" class="progress-chart" />
          </div>
          <div class="progress-c-line">
            <div class="start">
              <i class="dot complete"></i>
              <p class="time">{{project.startDate || project.planStartDate | formatDate}}</p>
              <p class="name">{{project.state == 1 ? '计划开工' : '项目开工'}}</p>
            </div>
            <div class="now" :style="{'padding-left':((usedDays / allDays) * 100 > 100 ? 100 : (usedDays / allDays) * 100) + '%'}">
              <i class="dot complete"></i>
              <p class="time"></p>
              <p class="name"></p>
            </div>
            <div class="end">
              <i class="dot"></i>
              <p class="time">{{(project.actFinishDate || project.planFinlishDate) | formatDate}}</p>
              <p class="name">{{project.state == 4 ? '项目竣工' : '计划竣工'}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="environment" v-if="project.moduleIds.indexOf('1-3-1') > -1">
      <div class="environment-l"></div>
      <div class="environment-c">
        <h4>能耗监测</h4>
        <div class="energy-con">
          <!-- <div class="energy-info">
            <div class="item">
              <p>今日总用电量</p>
              <h3>{{used.electric}}<span>kwh</span></h3>
            </div>
            <div class="item">
              <p>今日总用水量</p>
              <h3>{{used.water}}<span>t</span></h3>
            </div>
          </div> -->
          <div class="energy-tab">
              <p :class="energyActive == 0 ? 'active' : ''" @click="energyActive = 0">电表</p>
              <i></i>
              <p :class="energyActive == 1 ? 'active' : ''" @click="energyActive = 1">水表</p>
            </div>
          <div class="energy-chart-box">
            
            <div class="energy-chart-con">
              <Echart v-if="energyActive == 0" id="electDatafox" :options="electData" />
              <Echart v-else :options="waterData" id="waterData" />
            </div>
            
          </div>
        </div>
        <div class="environment-c-b"></div>
      </div>
      <div class="environment-r"></div>
    </div>
  </div>
  <div class="ov-r">
    <div class="personnel" style="height:60%;margin-bottom: 24px;min-height: 376px;">
      <dv-box title="人员实名制">
        <div class="personnel-info">
          <div class="item">
            <p>今日出勤</p>
            <h5>{{attendance.attendancenum}}</h5>
          </div>
          <div class="item">
            <p>出勤率</p>
            <h5>{{attendance.rate > 100 ? 100 : attendance.rate}}</h5>
          </div>
          <div class="item">
            <p>实名制总数</p>
            <h5>{{attendance.total}}</h5>
          </div>
        </div>
        <div class="personnel-chart-box" style="flex: 1;">
          <Echart :options="personnelData" id="personnelData" style="height: 100%;"></Echart>
        </div>
      </dv-box>
    </div>
    <div class="personnel" style="height:40%;min-height: 360px;">
      <dv-box title="质量安全">
        <div class="qs-box">
          <div class="qs-item">
              <Echart :options="qsdata1" id="qsdata1" />
          </div>
          <div class="qs-item">
              <Echart :options="qsdata2" id="qsdata2" />
          </div>
        </div>
      </dv-box>
    </div>
  </div>
</div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import moment from 'moment'
import {mapGetters} from 'vuex';
export default{
  components:{
    dvBox
  },
  props:{
    id:{
      type:Number|String,
      default:''
    },
    project:{
      type:Object|String,
      default:''
    }
  },
  computed:{
    allDays(){
      if(this.project?.planFinlishDate && this.project?.planStartDate) {
        return moment(this.project.planFinlishDate,'x')
          .diff(moment(this.project.planStartDate,'x'), 'day')
      }
      return '0'
    },
    usedDays(){
      if (this.project?.planStartDate) {
        if(this.project.planFinlishDate < moment().format('x')){
          return moment(this.project.planFinlishDate,'x').diff(moment(this.project.planStartDate,'x'), 'day')
        }else{
          return moment().diff(moment(this.project.planStartDate,'x'), 'day')
        }
      }
      return '0'
    },
    today(){
      return moment().format("YYYY-MM-DD")
    },
    ...mapGetters(["theme"])
  },
  filters:{
    formatDate(v){
      return v ? moment(v,'x').format("YYYY-MM-DD") : ''
    }
  },
  watch:{
    project:{
      handler(v){
        if(v && v.bgImage){
          let arr = JSON.parse(this.project.bgImage)
          arr.map(async (item) => {
            this.$api.downImage(item.id).then(res => {
              if(!res.code) this.imgList.push(res)
            })
          })
        }
      },
      deep:true,
      immediate:true
    }
  },
  data(){
    return{
      energyActive:0,
      environment:[
        {
          label:'温度',
          icon:require('../../../../assets/images/environment-icon1.png'),
          light:require('../../../../assets/images/environment-icon1-light.png'),
          value:'-'
        },
        {
          label:'PM2.5',
          icon:require('../../../../assets/images/environment-icon2.png'),
          light:require('../../../../assets/images/environment-icon2-light.png'),
          value:'-'
        },
        {
          label:'风向',
          icon:require('../../../../assets/images/environment-icon3.png'),
          light:require('../../../../assets/images/environment-icon3-light.png'),
          value:'-'
        },
        {
          label:'噪音',
          icon:require('../../../../assets/images/environment-icon4.png'),
          light:require('../../../../assets/images/environment-icon4-light.png'),
          value:'-'
        },
        {
          label:'PM10',
          icon:require('../../../../assets/images/environment-icon5.png'),
          light:require('../../../../assets/images/environment-icon5-light.png'),
          value:'-'
        },
        {
          label:'风速',
          icon:require('../../../../assets/images/environment-icon6.png'),
          light:require('../../../../assets/images/environment-icon6-light.png'),
          value:'-'
        }
      ],
      workerTotal:0,
      analyseSeries:[],
      used:{
        water:0,
        electric:0
      },
      attendance:{
        total:0,
        attendancenum:0,
        rate:'0%'
      },
      electData:"",
      waterData:"",
      progressData:"",
      personnelData: "",
      qsdata1:"",
      qsdata2:"",

      energyChartH:'',
      imgList:[]
    }
  },
  async created() {
    await this.init()
    this.getWorkerTotal()
    //今日用水
    this.$datav.getWaterToday({projectid:this.id,type:'day'}).then(res => {
      if(res.code == 0) this.used.water = res.data.costvalue.toFixed(1)
    })
    //今日用电
    this.$datav.getElectricToday({projectid:this.id,type:'day'}).then(res => {
      if(res.code == 0) this.used.electric = res.data.costvalue.toFixed(1)
    })
    //7日用电
    this.$datav.getElectricServen({projectid:this.id,devicesn:''}).then(res => {
      if(res.code == 0){
        let arr1 = [],arr2 = [],arr3 = [];
        for(let i=6;i>=0;i--){
          let obj1 = res.data['施工区'] && res.data['施工区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr1.push(obj1 ? obj1.costvalue.toFixed(1) : 0)

          let obj2 = res.data['办公区'] && res.data['办公区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr2.push(obj2 ? obj1.costvalue.toFixed(1) : 0)

          let obj3 = res.data['生活区'] && res.data['生活区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr3.push(obj3 ? obj3.costvalue.toFixed(1) : 0)
        }
        this.electData.series[0].data = arr1
        this.electData.series[1].data = arr2
        this.electData.series[2].data = arr3

      }
    })
    //7日用水
    this.$datav.getWaterServen({projectid:this.id,devicesn:''}).then(res => {
      if(res.code == 0){
        let arr1 = [],arr2 = [],arr3 = [];
        for(let i=6;i>=0;i--){
          let obj1 = res.data['施工区'] && res.data['施工区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr1.push(obj1 ? obj1.costvalue.toFixed(1) : 0)

          let obj2 = res.data['办公区'] && res.data['办公区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr2.push(obj2 ? obj1.costvalue.toFixed(1) : 0)

          let obj3 = res.data['生活区'] && res.data['生活区'].find(item => {
            return item.partitiondate == moment().subtract(i, 'days').format('YYYY-MM-DD')
          })
          arr3.push(obj3 ? obj3.costvalue.toFixed(1) : 0)
        }
        this.waterData.series[0].data = arr1
        this.waterData.series[1].data = arr2
        this.waterData.series[2].data = arr3
      }
    })
    //环境
    this.$datav.getEnvironmentReal({projectid:this.id,today:this.today}).then(res => {
      if(res.code == 0 && res.data){
        this.environment[0].value = res.data.temperature + '℃'
        this.environment[1].value = res.data.pm25 + 'ug/m³'
        this.environment[3].value = res.data.noise + 'dB'
        this.environment[4].value = res.data.pm10 + 'ug/m³'
        this.environment[5].value = res.data.windspeed + 'm/s'
      }
    })
    //人员实名制
    this.$datav.getAttendanceReal({projectid:this.id,today:this.today}).then(res => {
      if(res.code == 0 && res.data.length > 0){
        this.attendance.total = res.data[0].total
        this.attendance.attendancenum = res.data[0].attendancenum
        this.attendance.rate = Math.floor((res.data[0].attendancenum / res.data[0].total) * 100) + '%'
      }
    })
    //工种
    this.$datav.getWorktype({projectid:this.id}).then(res => {
      if(res.code == 0 && res.data){
        let arr1 = [],arr2 = []
        res.data.map(item => {
          arr1.push(item.worktype)
          arr2.push(item.num * 1)
        })
        this.$nextTick(() => {
          this.personnelData.xAxis.data = arr1
          this.personnelData.series[0].data = arr2
        })
        
      }
    })
    setTimeout(() => {
      this.progressData.series[0].data[0].value = this.usedDays
    },1500)

    this.$api.getQualIndexTopCounts({
      key:'year',
      projId:this.project.id
    }).then(res => {
      if(res.code == 0){
        this.qsdata1.series[0].data[0].value = res.result.NotEditTotal
        this.qsdata1.series[0].data[1].value = res.result.Total - res.result.NotEditTotal
        this.qsdata1.title.text = res.result.Total
      }
    })
    this.$api.getSafeIndexTopCounts({
      key:'year',
      projId:this.project.id
    }).then(res => {
      if(res.code == 0){
        this.qsdata2.series[0].data[0].value = res.result.NotEditTotal
        this.qsdata2.series[0].data[1].value = res.result.Total - res.result.NotEditTotal
        this.qsdata2.title.text = res.result.Total
      }
    })
  },
  methods: {
    getWorkerTotal(){
      this.$api.getWorkerTotal({}).then(res=>{
        this.analyseSeries = res.data
        this.workerTotal = res.data?res.data.reduce((prev,next)=>prev + parseInt(next.num),0):[]
      })
    },
    init(){
      return new Promise((resvole,reject) => {
        this.electData = {
          title: {
            text: '用电量(kwh)',
            textStyle:{
              color:this.theme == 'light' ? '#333' : '#fff',
              fontWeight:'normal',
              fontSize:'12px'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top:'18%',
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true,
            textStyle:{
              color:this.theme == 'light' ? '#333' : '#fff',
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [moment().subtract(6, 'days').format('MM-DD'),moment().subtract(5, 'days').format('MM-DD'),moment().subtract(4, 'days').format('MM-DD'),moment().subtract(3, 'days').format('MM-DD'),moment().subtract(2, 'days').format('MM-DD'),moment().subtract(1, 'days').format('MM-DD'),moment().format('MM-DD')],
            axisLabel:{
                color:this.theme == 'light' ? '#333' : '#fff',
              }
          },
          yAxis: {
            type: 'value',
            splitLine:false,
            axisLabel:{
                color:this.theme == 'light' ? '#333' : '#fff',
              }
          },
          series: [
            {
              name: '施工区',
              type: 'line',
              smooth: true,
              data: []
            },
            {
              name: '办公区',
              type: 'line',
              smooth: true,
              data: []
            },
            {
              name: '生活区',
              type: 'line',
              smooth: true,
              data: []
            },
          ]
        }
        this.waterData = {
          title: {
            text: '用水量(t)',
            textStyle:{
              color:this.theme == 'light' ? '#333' : '#fff',
              fontWeight:'normal',
              fontSize:'12px'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top:'18%',
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [moment().subtract(6, 'days').format('MM-DD'),moment().subtract(5, 'days').format('MM-DD'),moment().subtract(4, 'days').format('MM-DD'),moment().subtract(3, 'days').format('MM-DD'),moment().subtract(2, 'days').format('MM-DD'),moment().subtract(1, 'days').format('MM-DD'),moment().format('MM-DD')],
            axisLabel:{
                color:this.theme == 'light' ? '#333' : '#fff',
              }
          },
          yAxis: {
            type: 'value',
            splitLine:false,
            axisLabel:{
                color:this.theme == 'light' ? '#333' : '#fff',
              }
          },
          series: [
            {
              name: '施工区',
              type: 'line',
              smooth: true,
              data: []
            },
            {
              name: '办公区',
              type: 'line',
              smooth: true,
              data: []
            },
            {
              name: '生活区',
              type: 'line',
              smooth: true,
              data: []
            },
          ]
        }
        this.progressData = {
          series: [
            {
              min: 0,
              max:this.allDays,
              type: 'gauge',
              startAngle: 210,
              endAngle:-30,
              progress: {
                show: true,
                width: 4
              },
              axisLine: {
                lineStyle: {
                  width: 4
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                distance: 6,
                length: 4,
                lineStyle: {
                  width: 2,
                  color: '#ccc'
                }
              },
              axisLabel: {
                show: false,
                distance: 8,
                color: '#333',
                fontSize: 6
              },
              anchor: {
                show: false,
              },
              pointer: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 30,
                offsetCenter: [0, '-10%'],
                color: '#0374FE'
              },
              data: [
                {
                  value: 0
                }
              ]
            }
          ]
        }
        this.personnelData = {
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data:[]
          },
          yAxis: {
            type: 'value',
            axisLabel:{
              color:this.theme === 'light' ? '#333' : '#fff'
            }
          },
          grid: {
            top:'8%',
            left: '3%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          series: [
            {
              data: [],
              type: 'bar',
              barMaxWidth: 20,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2A68F6' },
                  { offset: 1, color: '#449AF8' }
                ])
              },
              label:{
                show: true,
                position: 'insideBottom',
                distance:15,
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                formatter: '{b}',
                fontSize: 12,
              }
            }
          ],
        }
        this.qsdata1 = {
          title: {
            text: 0,
            subtext: '质量问题总数',
            left: 'center',
            top: '44%',
            itemGap: 0,
            textStyle: {
              color: this.theme == 'light' ? '#000' : '#00FAFF',
              fontSize: 24
            },
            subtextStyle: {
              color: this.theme == 'light' ? '#666' : '#fff',
              fontSize: 12,
              lineHeight: 26
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '0%',
            left: 'center',
            textStyle:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
          },
          series: [
            {
              name: '质量检查',
              type: 'pie',
              radius: ['55%', '75%'],
              center: ['50%', '55%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 0, name: '待整改' },
                { value: 0, name: '已整改' },
              ]
            }
          ],
          color:['#F5B944']
        }
        this.qsdata2 = {
          title: {
            text: 345,
            subtext: '安全问题总数',
            left: 'center',
            top: '44%',
            itemGap: 0,
            textStyle: {
              color: this.theme == 'light' ? '#000' : '#00FAFF',
              fontSize: 24
            },
            subtextStyle: {
              color: this.theme == 'light' ? '#666' : '#fff',
              fontSize: 12,
              lineHeight: 26
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '0%',
            left: 'center',
            textStyle:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
          },
          series: [
            {
              name: '安全巡查',
              type: 'pie',
              radius: ['55%', '75%'],
              center: ['50%', '55%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 0, name: '待整改' },
                { value: 0, name: '已整改' },
              ]
            }
          ],
          color:['#F5B944']
        }
        resvole()
      })
      
    }
  },
}
</script>

<style lang="scss" scoped>
.overview{
  display: flex;
  width: 100%;
  height: 100%;
  .ov-l,.ov-r{
    width: 27.5%;
    display: flex;
    flex-direction: column;
  }
  .ov-c{
    width: 42%;
    margin: 0 1.5%;
    display: flex;
    flex-direction: column;
  }
}

.introduction-con{
  padding: 0 10px;
  .item{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .label{
      display: flex;
      align-items: center;
      color: #8C96A1;
      font-size: 16px;
      margin-right: 16px;
      i{
        width: 4px;
        height: 4px;
        background: #FAB217;
        border-radius: 2px;
        margin-right: 8px;
      }
    }
    .value{
      flex: 1;
      background: rgba(208, 222, 238, .1);
      padding: 8px 12px;
      font-size: 14px;
      color: #D0DEEE;
      text-shadow: 0px 2px 4px rgba(21,154,255,0.8000);
      &.info{
        height: 106px;
        line-height: 22px;
      }
    }
    .line2{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.energy{
  flex: 1;
}
.energy-con{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  .energy-info{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .item{
      width: 220px;
      height: 30px;
      background: url("../../../../assets/images/ov-energy.png") 0 0 no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      p{
        margin: 0 10px 0 0;
        font-size: 14px;
        color: #FFE6D9;
      }
      h3{
        font-size: 22px;
        color: #FFE6D9;
        text-shadow: 0px 0px 8px rgba(255,119,52,0.5000);
        margin: 0;
        padding: 0;
        line-height: 1;
        span{
          font-size: 12px;
          margin-left: 4px;
        }
      }
    }
  }
  .energy-tab{
      position: absolute;
      width: 130px;
      height: 26px;
      display: flex;
      align-items: center;
      right: 0;
      top: 12px;
      border: 1px rgba(3, 116, 254, 1) solid;
      z-index: 2;
      p{
        margin: 0;
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: rgba(138, 143, 152, 1);
        cursor: pointer;
        &.active{
          color: rgba(3, 116, 254, 1);
        }
      }
      i{
        width: 1px;
        height: 10px;
        background: rgba(3, 116, 254, 1);;
      }
    }
  .energy-chart-box{
    
    flex: 1;
    display: flex;
    flex-direction: column;
    .energy-chart-con{
      margin-top: 5px;
      flex: 1;
      min-height: 150px;
    }
    
  }
}
.ov-c-con{
  background: url("../../../../assets/images/ov-c-bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .progress{
    margin-top: 15px;
    h4{
      margin: 0;
      font-family: 'youshe',Microsoft YaHei;
      color: #FFFFFF;
      font-size: 20px;
      text-shadow: 0px 0px 9px #159AFF;
      font-weight: normal;
    }
    .progress-c-chart{
      margin-top: 15px;
      width: 170px;
      height: 128px;
      background: url("../../../../assets/images/progress_bg.png") 0 0 no-repeat;
      background-size: 100% 100%;
      position: relative;
      &::after{
        content: '已施工(天)';
        font-size: 12px;
        color: rgba(255,255,255,.6);
        position: absolute;
        left: 58px;
        bottom: 10px;
      }
    }
    .progress-chart{
      position: absolute;
      left: 0px;
      width: 170px !important;
      height: 170px !important;
    }
    .progress-c{
      display: flex;
      align-items: center;
      .progress-c-line{
        display: flex;
        flex: 1;
        position: relative;
        margin-left: 50px;
        padding-top: 38px;
        justify-content: space-between;
        &::after{
          content:" ";
          position:absolute;
          width: 100%;
          height: 4px;
          border-radius: 2px;
          background: rgba(255,255,255,.3);
          left: 0;
          top: 40px;
        }
        .start{
          align-self:flex-start;
        }
        .end{
          text-align: right;
          .dot{
            float: right;
          }
        }
        .now{
          position: absolute;
          left: 0;
          top: 38px;
          padding-left: 30%;
          &::before{
            content: '';
            height: 4px;
            border-radius: 2px;
            background: linear-gradient(270deg, #00EFFF 0%, #00527D 100%);
            position: absolute;
            left: 8px;
            right: 8px;
            top: 2px;
          }
        }
        i.dot{
          display: block;
          float: left;
          border-radius: 50%;
          width: 8px;
          height: 8px;
          background: #FFFFFF;
          box-shadow: 0px 0px 4px 1px rgba(21,154,255,0.8000);
          &.complete{
            background: #17FA76;
            border: 2px solid #FFFFFF;
          }
        }
        p{
          margin: 0;
          font-size: 14px;
          &.time{
            color: #8C96A1;
            padding: 18px 0 6px;
          }
          &.name{
            color: #D0DEEE;
          }
        }
      }
    }
  }
}
.environment{
  display: flex;
  height: 204px;
  margin-top: 20px;
  .environment-l{
   width: 15px;
   height: 100%;
   background: url('../../../../assets/images/environment-l.png') 0 0 no-repeat; 
  }
  .environment-c{
    flex: 1;
    display: flex;
    flex-direction: column;
    h4{
      margin: 0;
      font-size: 20px;
      text-shadow: 0px 0px 9px #159AFF;
      color: #fff;
      font-family: 'youshe',Microsoft YaHei;
      font-weight: normal;
      background: url("../../../../assets/images/environment-t.png") 0 bottom no-repeat;
      padding-left: 30px;
      padding-bottom: 6px;
    }
    .environment-c-b{
      width: 100%;
      height: 10px;
      background: url('../../../../assets/images/environment-b.png') 0 0 no-repeat; 
    }
  }
  .environment-r{
   width: 15px;
   height: 100%;
   background: url('../../../../assets/images/environment-r.png') 0 0 no-repeat; 
  }
}
.environment-c-con{
      width: 100%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      padding-top: 28px;
      .item{
        display: flex;
        height: 40px;
        margin-bottom: 28px;
        width: 50%;
        padding-left: 40px;
        img{
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }
        .v{
          display: flex;
          flex-direction: column;
          justify-content: center;
          span{
            font-size: 14px;
            color: #888;
            margin-bottom: 5px;
          }
          p{
            margin: 0;
            font-size: 16px;
            color: #000;
          }
        }
      }
    }
.personnel{
  .personnel-info{
    display: flex;
    justify-content: space-between;
    .item{
      width: 113px;
      p{
        height: 22px;
        background: url("../../../../assets/images/personnel-info-bg1.png") 0 0 no-repeat;
        background-size: 100% 100%;
        margin: 0;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
        text-shadow: 0px 0px 9px rgba(21,154,255,0.5000);
        color: #fff;
        margin-bottom: 6px;
      }
      h5{
        height: 38px;
        background: url("../../../../assets/images/personnel-info-bg2.png") 0 0 no-repeat;
        margin: 0;
        text-align: center;
        line-height: 38px;
        font-size: 24px;
        text-shadow: 0px 0px 9px #159AFF;
        color: #fff;
        font-weight: 600;
        font-family: 'youshe',Microsoft YaHei;
      }
    }
  }
  .personnel-chart{
    height: 398px !important;
  }
  
}

.qs-box{
  display: flex;
  width: 100%;
  height: 100%;
  .qs-item{
    width: 50%;
    display: flex;
    flex-direction: column;
    .qs-chart-box{
      flex: 1;
    }
    p{
      font-size: 14px;
      margin: 0;
      color: rgba(255,255,255,0.6);
      text-align: center;
    }
  }
}

.light{
  .introduction-con{
    .item{
      .value{
        background: #EBEBF1;
        color: #333;
        text-shadow: none;
      }
    }
  }
  .energy-con{
    .energy-info{
      .item{
        background: #EDEDF2;
        p{
          color: #000;
        }
        h3{
          color: #0374FE;
          text-shadow: none;
        }
      }
    }
    .energy-chart{
      .energy-tab{
        background: none;
        border: 1px solid #0374FE;
        p{
          color: #8A8F98;
          &.active{
            color: #0374FE;
          }
        }
        i{
          background: #0374FE;
        }
      }
    }
  }

  .ov-c-con{
    background: #F5F7FA;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.1600);
    border-radius: 2px;
    .progress{
      h4{
        font-family: Microsoft YaHei;
        color: #333;
        text-shadow: none;
      }
      .progress-c-chart{
        &::after{
          color: #333;
        }
      }
      .progress-c{
        .progress-c-line{
          display: flex;
          flex: 1;
          position: relative;
          margin-left: 50px;
          padding-top: 38px;
          justify-content: space-between;
          &::after{
            content:" ";
            border-radius: 2px;
            height: 2px;
            background: #B9BCCC;
          }
          .start{
            align-self:flex-start;
          }
          .end{
            text-align: right;
            .dot{
              float: right;
            }
          }
          .now{
            &::before{
              height: 2px;
              background: #0374FE;
              top: 2px;
              z-index: 9;
            }
          }
          i.dot{
            background: #aaa;
            box-shadow: none;
            position: relative;
            z-index: 10;
            &.complete{
              background: #0374FE;
              border: none;
            }
          }
          p{
            &.time{
              color: #666;
            }
            &.name{
              color: #000;
            }
          }
        }
      }
    }
  }

  .environment{
    .environment-l{
      width: 0;
    }
    .environment-c{
      h4{
        text-shadow: none;
        color: #0374FE;
        font-family: Microsoft YaHei;
        padding-left: 0;
        padding-bottom: 10px;
        border-bottom: 2px solid #0374FE;
        background: none;
        position: relative;
        &::before,&::after{
          width: 22px;
          height: 3px;
          background: #0374FE;
          position: absolute;
          content: "";
          bottom:0;
        }
        &::before{
          left: 0;
        }
        &::after{
          right: 0;
        }
      }
      .environment-c-con{
        .item{
          img{
            width: 40px;
            height: 40px;
            margin-right: 12px;
          }
          .v{
            span{
              color: #777;
            }
            p{
              color: #000;
              text-shadow: none;
            }
          }
        }
      }
      .environment-c-b{
        height: 7px;
        background: url('../../../../assets/images/ovbox-b_light.png') 0 0 no-repeat; 
        background-size: 100% 100%;
      }
    }
    .environment-r{
      width: 0;
    }
  }

  .personnel{
    .personnel-info{
      .item{
        width: 113px;
        p{
          background: url("../../../../assets/images/personnel-info-bg1-light.png") 0 0 no-repeat;
          background-size: 100% 100%;
          text-shadow: none;
          color: #333;
        }
        h5{
          background: url("../../../../assets/images/personnel-info-bg2-light.png") 0 0 no-repeat;
          text-shadow: none;
          color: #0374FE;
          font-family: Microsoft YaHei;
        }
      }
    }
  }

  .qs-box{
    .qs-item{
      p{
        color: rgba(0,0,0,0.6);
      }
    }
  }
}

::v-deep .el-carousel{
  flex: 1;
  min-height: 274px;
  .el-carousel__container{
    height: 100%;
  }
}
</style>